const option={
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        textStyle:{
           fontSize:10   
        },
    },
    legend: {
        orient: 'horizontal',
        left: 10,
        data: ['直接访问', '邮件营销'],
        textStyle:{

            color:'#fff'
        },
        icon:'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
    },

    color: ["#2478b6", "#c2572d", "#66CCCC"],
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        roseType: 'radius',
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
 
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
                color:'#fff',
                formatter:(e)=>{
                    return e.seriesName +'\n\n'+e.percent+'%'
                }
            }
        },
        labelLine: {
            show: false
        },
        data: [{
                value: 385,
                name: '直接访问'
            },
            {
                value: 310,
                name: '邮件营销'
            }
        ],
        roundCap: true //可选项为1和2，不填则采用原有拼接方式
    }]
}

function create() {
    const config = {
        name: '',
        type: 'custom',
        coordinateSystem: "none",
        data: [0],
    }
    const paramsArr = [{
        r: 0.68,
        startAngle: 230,
        endAngle: 50,
        lineWidth: 2
    }, {
        r: 0.68,
        startAngle: 60,
        endAngle: 220,
        lineWidth: 2
    }, {
        startAngle: 230,
        endAngle: 250
    }, {
        startAngle: 200,
        endAngle: 220
    }, {
        startAngle: 30,
        endAngle: 50
    }, {
        startAngle: 60,
        endAngle: 80
    }];
    paramsArr.forEach(item => {
        const data = {
            ...config,
            renderItem: function (params, api) {
                return {
                    type: 'arc',
                    style: {
                        stroke: '#56595a',
                        fill: 'transparent',
                        lineWidth:item.lineWidth?item.lineWidth:5
                    },
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * (item.r?item.r:0.67),
                        startAngle: (item.startAngle) * Math.PI / 180,
                        endAngle: (item.endAngle) * Math.PI / 180
                    },
                }
            }
        };
        option.series.push(data);
    })

}
create();

export default option;

export function handlerOptions(chart,newConfig){
    if(newConfig && (Object.keys(newConfig).length!==0)){
        chart.setOption({...newConfig},false);
        console.log(chart.getOption());
    }

}